<template>
  <div class="middle">
    <div class="middlebg"></div>
    <el-tabs type="card"  v-loading.lock="loading">
      <div>
        <span slot="label" class="title1 planTitle">数据统计</span>
        <span slot="label" class="title1" @click="student">学生数据</span>
        <span slot="label" class="title1" @click="importData">数据导入</span>
        <div>
          <div class="two" v-model="schoolYearInfo">
            <div class="circle"></div>
            <div class="adaptive">学年：</div>
            <div type="success" class="Greens" :class="{searchchange:changegreen == item.id}" v-for="item in schoolYearInfo" @click="search(item.id,item.year)">{{item.year}}</div>
          </div>
          <div class="one" v-model="gradeInfo">
            <div class="circle"></div>
            <div class="adaptive">年级：</div>
            <div class="green" :class="{searchchange2:changegreen2 == item.id}" v-for="item in gradeInfo" @click="search2(item.id,item.grade_title)">{{item.grade_title}}</div>
          </div>
          <div class="three" v-model="classInfo" v-show="isshow">
            <div class="circle"></div>
            <div class="adaptive">班级：</div>
            <div type="success" class="Greens" :class="{searchchange3:changegreen3 == item.id}" v-for="item in classInfo" @click="search3(item.id,item.className)">{{item.className}}</div>
          </div>
        </div>
        <div v-show="echartsShow">
          <div>
            <ul class="tab-tilte">
              <li @click="cur=0" :class="{active:cur==0}">图表</li>
              <li @click="cur=1" :class="{active:cur==1}">列表</li>
            </ul>
          </div>
          <div class="tab-content">
            <div v-show="cur==0" class="chart">
              <div class="dendrogram">
                <div v-model="rate" v-if ="rate.length == 0?false:true">
                  <h5>总体统计</h5>
                  <div class="evaluate">
                    <span class="block"></span>
                    <span>优秀</span>
                    <span class="block"></span>
                    <span>良</span>
                    <span class="block"></span>
                    <span>合格</span>
                    <span class="block"></span>
                    <span>不合格</span>
                  </div>
                  <div>
                    <div class="total">
                      <h6>全部</h6>
                      <span>{{rate.all}}</span>
                    </div>
                    <div class="rectangle" >
                      <div class="bgc">
                        <span class="one" v-bind:style="{width:rate.varygood2}"></span>
                        <span class="two" v-bind:style="{width:rate.ok2}"></span>
                        <span class="three" v-bind:style="{width:rate.good2}"></span>
                        <span class="four" v-bind:style="{width:rate.lose2}"></span>
                      </div>
                      <div class="bgc2">
                        <span class="one2" :style="{width:rate.varygood2}">{{rate.varygood1}}</span>
                        <span class="two2" :style="{width:rate.ok2}">{{rate.ok1}}</span>
                        <span class="three2" :style="{width:rate.good2}">{{rate.good1}}</span>
                        <span class="four2" :style="{width:rate.lose2}">{{rate.lose1}}</span>
                      </div>
                    </div>
                  </div>
                </div>
                  <div v-show="allEcharts.length == 0?false:true" class="pic" id="bar_dv" ref="chart" :style="{width: '1200px', height: '280px'}">
                </div>
              </div>
              <div class="dendrogram" v-show="bmiEcharts.length == 0?false:true">
                <h5>BMI</h5>
                <div class="pic" id="bar_dv4" ref="chart4" :style="{width: '1200px', height: '280px'}"></div>
              </div>
              <div class="dendrogram" v-show="vitalEcharts.length == 0?false:true">
                <h5>肺活量</h5>
                <div class="pic" id="bar_dv5" ref="chart5" :style="{width: '1200px', height: '280px'}"></div>
              </div>
              <div class="dendrogram" v-show="ropeEcharts.length == 0?false:true">
                <h5>一分钟跳绳</h5>
                <div class="pic" id="bar_dv6" ref="chart6" :style="{width: '1200px', height: '280px'}"></div>
              </div>
              <div class="dendrogram" v-show="sitEcharts.length == 0?false:true">
                <h5>座位体前屈</h5>
                <div class="pic" id="bar_dv7" ref="chart7" :style="{width: '1200px', height: '280px'}"></div>
              </div>
              <div class="dendrogram" v-show="fiftyEcharts.length == 0?false:true">
                <h5>50米跑</h5>
                <div class="pic" id="bar_dv8" ref="chart8" :style="{width: '1200px', height: '280px'}"></div>
              </div>
              <div class="dendrogram" v-show="sitUpEcharts.length == 0?false:true">
                <h5>一分钟仰卧起坐</h5>
                <div class="pic" id="bar_dv9" ref="chart9" :style="{width: '1200px', height: '280px'}"></div>
              </div>
              <div class="dendrogram" v-show="fiftyEightEcharts.length == 0?false:true">
                <h5>50*8往返跑</h5>
                <div class="pic" id="bar_dv10" ref="chart10" :style="{width: '1200px', height: '280px'}"></div>
              </div>
              <div class="dendrogram" v-show="standingEcharts.length == 0?false:true">
                <h5>立定跳远</h5>
                <div class="pic" id="bar_dv11" ref="chart11" :style="{width: '1200px', height: '280px'}"></div>
              </div>
              <div class="dendrogram" v-show="oneEcharts.length == 0?false:true">
                <h5>1000米跑</h5>
                <div class="pic" id="bar_dv12" ref="chart12" :style="{width: '1200px', height: '280px'}"></div>
              </div>
              <div class="dendrogram" v-show="eightEcharts.length == 0?false:true">
                <h5>800米跑</h5>
                <div class="pic" id="bar_dv13" ref="chart13" :style="{width: '1200px', height: '280px'}"></div>
              </div>
            </div>
            <!--列表部分-->
            <div v-show="cur==1" class="list">
              <div class="title">
                <h5>统计范围:</h5>
                <span>{{year}}</span>
                <span>{{grade}}</span>
                <span>{{className}}</span>
              </div>
              <div class="surface">
                <table>
                  <tr>
                    <td>项目</td>
                    <td>全部</td>
                    <td>优秀人数</td>
                    <td>良好人数</td>
                    <td>合格人数</td>
                    <td>不合格人数</td>
                    <td>优秀率%</td>
                    <td>合格率%</td>
                  </tr>
                  <tr v-model="BMI" v-show="BMI.length == 0?false:true">
                    <td>BMI</td>
                    <td>{{BMI.all}}</td>
                    <td>{{BMI.fine}}</td>
                    <td>{{BMI.good}}</td>
                    <td>{{BMI.qualified}}</td>
                    <td>{{BMI.noqualified}}</td>
                    <td>{{BMI.pass}}</td>
                    <td>{{BMI.outstanding}}</td>
                  </tr>
                  <tr v-model="vital" v-show="vital.length == 0?false:true">
                    <td>肺活量</td>
                    <td>{{vital.all}}</td>
                    <td>{{vital.fine}}</td>
                    <td>{{vital.good}}</td>
                    <td>{{vital.qualified}}</td>
                    <td>{{vital.noqualified}}</td>
                    <td>{{vital.pass}}</td>
                    <td>{{vital.outstanding}}</td>
                  </tr>
                  <tr v-model="sit" v-show="sit.length == 0?false:true">
                    <td>坐位体前屈</td>
                    <td>{{sit.all}}</td>
                    <td>{{sit.fine}}</td>
                    <td>{{sit.good}}</td>
                    <td>{{sit.qualified}}</td>
                    <td>{{sit.noqualified}}</td>
                    <td>{{sit.pass}}</td>
                    <td>{{sit.outstanding}}</td>
                  </tr>
                  <tr v-model="rope" v-show="rope.length == 0?false:true">
                    <td>一分钟跳绳</td>
                    <td>{{rope.all}}</td>
                    <td>{{rope.fine}}</td>
                    <td>{{rope.good}}</td>
                    <td>{{rope.qualified}}</td>
                    <td>{{rope.noqualified}}</td>
                    <td>{{rope.pass}}</td>
                    <td>{{rope.outstanding}}</td>
                  </tr>
                  <tr v-model="five_m" v-show="five_m.length == 0?false:true">
                    <td>50米跑</td>
                    <td>{{five_m.all}}</td>
                    <td>{{five_m.fine}}</td>
                    <td>{{five_m.good}}</td>
                    <td>{{five_m.qualified}}</td>
                    <td>{{five_m.noqualified}}</td>
                    <td>{{five_m.pass}}</td>
                    <td>{{five_m.outstanding}}</td>
                  </tr>
                  <tr v-model="sit_up" v-show="sit_up.length == 0?false:true">
                    <td>一分钟仰卧起坐</td>
                    <td>{{sit_up.all}}</td>
                    <td>{{sit_up.fine}}</td>
                    <td>{{sit_up.good}}</td>
                    <td>{{sit_up.qualified}}</td>
                    <td>{{sit_up.noqualified}}</td>
                    <td>{{sit_up.pass}}</td>
                    <td>{{sit_up.outstanding}}</td>
                  </tr>
                  <tr v-model="fifty_eight" v-show="fifty_eight.length == 0?false:true">
                    <td>50*8往返跑</td>
                    <td>{{fifty_eight.all}}</td>
                    <td>{{fifty_eight.fine}}</td>
                    <td>{{fifty_eight.good}}</td>
                    <td>{{fifty_eight.qualified}}</td>
                    <td>{{fifty_eight.noqualified}}</td>
                    <td>{{fifty_eight.pass}}</td>
                    <td>{{fifty_eight.outstanding}}</td>
                  </tr>
                  <tr v-model="standing" v-show="standing.length == 0?false:true">
                    <td>立定跳远</td>
                    <td>{{standing.all}}</td>
                    <td>{{standing.fine}}</td>
                    <td>{{standing.good}}</td>
                    <td>{{standing.qualified}}</td>
                    <td>{{standing.noqualified}}</td>
                    <td>{{standing.pass}}</td>
                    <td>{{standing.outstanding}}</td>
                  </tr>
                  <tr v-model="one1" v-show="one1.length == 0?false:true">
                    <td>1000米跑</td>
                    <td>{{one1.all}}</td>
                    <td>{{one1.fine}}</td>
                    <td>{{one1.good}}</td>
                    <td>{{one1.qualified}}</td>
                    <td>{{one1.noqualified}}</td>
                    <td>{{one1.pass}}</td>
                    <td>{{one1.outstanding}}</td>
                  </tr>
                  <tr v-model="eight" v-show="eight.length == 0?false:true">
                    <td>800米跑</td>
                    <td>{{eight.all}}</td>
                    <td>{{eight.fine}}</td>
                    <td>{{eight.good}}</td>
                    <td>{{eight.qualified}}</td>
                    <td>{{eight.noqualified}}</td>
                    <td>{{eight.pass}}</td>
                    <td>{{eight.outstanding}}</td>

                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>

      </div>
    </el-tabs>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        isshow:false,
        echartsShow:false,
        changegreen: false,//学年id
        changegreen2: false,//年级id
        changegreen3: false,//班级id
        schoolYearInfo:[],
        gradeInfo:[],
        classInfo:[],
        year:'',//学年名称
        grade:'',//年级名称
        className:'',//班级名称
        cur: 0,//默认选中第一个tab
        yearType:'all',
        tableData: [{
          project: '身高',
          all: '1000',
          fine: '100',
          good: '100',
          qualified: '100',
          no_qualified: '100',
          pass: '50%',
          pass2: '40%'
        }],
        loading:false,
        rate:[{
          varygood1:'',
          ok1:'',
          good1:'',
          lose1:'',
          varygood2:'',
          ok2:'',
          good2:'',
          lose2:'',
          all:'',
          All:'全部',
        }],
        allEcharts:[],
        bmiEcharts:[],
        vitalEcharts:[],
        sitEcharts:[],
        ropeEcharts:[],
        sitUpEcharts:[],
        fiftyEcharts:[],
        fiftyEightEcharts:[],
        standingEcharts:[],
        oneEcharts:[],
        eightEcharts:[],
        BMI:[{
          all:'',
          fine:'',
          good:'',
          qualified:'',
          noqualified:'',
          outstanding:'',
          pass:'',
        }],
        vital:[{
          all:'',
          fine:'',
          good:'',
          qualified:'',
          noqualified:'',
          outstanding:'',
          pass:'',
        }],
        sit:[{
          all:'',
          fine:'',
          good:'',
          qualified:'',
          noqualified:'',
          outstanding:'',
          pass:'',
        }],
        rope:[{
          all:'',
          fine:'',
          good:'',
          qualified:'',
          noqualified:'',
          outstanding:'',
          pass:'',
        }],
        five_m:[{
          all:'',
          fine:'',
          good:'',
          qualified:'',
          noqualified:'',
          outstanding:'',
          pass:'',
        }],
        sit_up:[{
          all:'',
          fine:'',
          good:'',
          qualified:'',
          noqualified:'',
          outstanding:'',
          pass:'',
        }],
        fifty_eight:[{
          all:'',
          fine:'',
          good:'',
          qualified:'',
          noqualified:'',
          outstanding:'',
          pass:'',
        }],
        standing:[{
          all:'',
          fine:'',
          good:'',
          qualified:'',
          noqualified:'',
          outstanding:'',
          pass:'',
        }],
        one1:[{
          all:'',
          fine:'',
          good:'',
          qualified:'',
          noqualified:'',
          outstanding:'',
          pass:'',
        }],
        eight:[{
          all:'',
          fine:'',
          good:'',
          qualified:'',
          noqualified:'',
          outstanding:'',
          pass:'',
        }],
      }
    },
      // watch: {
      //   allEcharts (val) {
      //     console.log(val);
      //     this.drawLine(val);
      //   },
      // },
    methods: {
      //学生数据
      student () {
        this.$router.push({name: 'stu_data'})
      },
      //导入数据
      importData () {
        this.$router.push({name: 'data_import'})
      },
      getYear(){
        this.$http.post('/api/constitution/schoolYearInfo',{
          type:this.yearType,
        }).then(res=>{
          this.schoolYearInfo = res.data.data.schoolYearInfo
          this.gradeInfo = res.data.data.gradeInfo
        })
      },
      //学年
      search(id,year){
        this.changegreen = id
        this.year = year
        this.getEchart()
        this.getTableData()
        this.loading = true
      },
      //年级
      search2(id,grade){
        this.changegreen2 = id
        this.grade = grade
        this.$http.post('/api/constitution/getClassInfo',{
          gradeId:id
        }).then(res=>{
          this.classInfo = res.data.data
        })
        this.isshow = true
        this.loading = true
        this.getEchart()
        this.getTableData()
      },
      //班级
      search3(id,className){
        this.changegreen3 = id
        this.className = className
        this.loading = true
        this.getEchart()
        this.getTableData()
      },
      getEchart(){
        this.$http.post('api/constitution/barSport',{
          gradeId:this.changegreen2,
          schoolYearId:this.changegreen,
          classId:this.changegreen3
        }).then(res=>{
          this.loading = false
          this.echartsShow = true
          this.allEcharts = res.data.all
          this.bmiEcharts = res.data.bmi
          this.vitalEcharts = res.data.vital
          this.sitEcharts = res.data.sit
          this.ropeEcharts = res.data.rope
          this.sitUpEcharts = res.data.sit_up
          this.fiftyEcharts = res.data.five_m
          this.fiftyEightEcharts = res.data.fifty_eight
          this.standingEcharts = res.data.standing
          this.oneEcharts = res.data.one
          this.eightEcharts = res.data.eight
          this.drawLine()
          this.drawLine4()
          this.drawLine5()
          this.drawLine6()
          this.drawLine7()
          this.drawLine8()
          this.drawLine9()
          this.drawLine10()
          this.drawLine11()
          this.drawLine12()
          this.drawLine13()
          this.rate = res.data.rate
          if(this.rate.length != 0){
            let num = res.data.rate.varygoodL+res.data.rate.goodL+res.data.rate.okL
            if(res.data.rate.varygoodL<5){
              this.rate.varygood1 = res.data.rate.varygoodL+'%'
            }else {
              this.rate.varygood1 = res.data.rate.varygoodL+'%'+'('+res.data.rate.varygood+')'
            }
            if(res.data.rate.goodL<5) {
              this.rate.good1 = res.data.rate.goodL+'%'
            }else {
              this.rate.good1 = res.data.rate.goodL+'%'+'('+res.data.rate.good+')'
            }
            if(res.data.rate.okL<5){
              this.rate.ok1 = res.data.rate.okL+'%'
            }else {
              this.rate.ok1 = res.data.rate.okL+'%'+'('+res.data.rate.ok+')'
            }
            if(res.data.rate.loseL<5){
              this.rate.lose1 =100-num+'%'
            }else {
              this.rate.lose1 =100-num+'%'+'('+res.data.rate.lose+')'
            }
            this.rate.varygood2 = res.data.rate.varygoodL+'%'
            this.rate.good2 = res.data.rate.goodL+'%'
            this.rate.ok2 = res.data.rate.okL+'%'
            this.rate.lose2 =100-num+'%'
            this.rate.all = res.data.rate.varygood+res.data.rate.good+res.data.rate.ok+res.data.rate.lose
          }
        })
      },
      getTableData(){
        this.$http.post('api/constitution/barSport1',{
          gradeId:this.changegreen2,
          schoolYearId:this.changegreen,
          classId:this.changegreen3
        }).then(res=>{
          //BMI
          this.BMI = res.data.bmi
          if(this.BMI.length != 0) {
            this.BMI.all = this.BMI.all + '(' + '男' + this.BMI.boyAll + '女' + this.BMI.girlAll + ')'
            this.BMI.fine = this.BMI.boyYou + this.BMI.girlYou + '(' + '男' + this.BMI.boyYou + '女' + this.BMI.girlYou + ')'
            this.BMI.good = this.BMI.boyLiang + this.BMI.girlLiang + '(' + '男' + this.BMI.boyLiang + '女' + this.BMI.girlLiang + ')'
            this.BMI.qualified = this.BMI.boyHege + this.BMI.girlHege + '(' + '男' + this.BMI.boyHege + '女' + this.BMI.girlHege + ')'
            this.BMI.noqualified = this.BMI.boyBuhege + this.BMI.girlBuhege + '(' + '男' + this.BMI.boyBuhege + '女' + this.BMI.girlBuhege + ')'
            this.BMI.outstanding = this.BMI.Qualified
            this.BMI.pass = this.BMI.Good
          }
          //肺活量
          this.vital = res.data.vital
          if(this.vital.length != 0) {
            this.vital.all = this.vital.all + '(' + '男' + this.vital.boyAll + '女' + this.vital.girlAll + ')'
            this.vital.fine = this.vital.boyYou + this.vital.girlYou + '(' + '男' + this.vital.boyYou + '女' + this.vital.girlYou + ')'
            this.vital.good = this.vital.boyLiang + this.vital.girlLiang + '(' + '男' + this.vital.boyLiang + '女' + this.vital.girlLiang + ')'
            this.vital.qualified = this.vital.boyHege + this.vital.girlHege + '(' + '男' + this.vital.boyHege + '女' + this.vital.girlHege + ')'
            this.vital.noqualified = this.vital.boyBuhege + this.vital.girlBuhege + '(' + '男' + this.vital.boyBuhege + '女' + this.vital.girlBuhege + ')'
            this.vital.outstanding = this.vital.Qualified
            this.vital.pass = this.vital.Good
          }
          //坐位体前屈
          this.sit = res.data.sit
          if(this.sit.length != 0) {
            this.sit.all = this.sit.all + '(' + '男' + this.sit.boyAll + '女' + this.sit.girlAll + ')'
            this.sit.fine = this.sit.boyYou + this.sit.girlYou + '(' + '男' + this.sit.boyYou + '女' + this.sit.girlYou + ')'
            this.sit.good = this.sit.boyLiang + this.sit.girlLiang + '(' + '男' + this.sit.boyLiang + '女' + this.sit.girlLiang + ')'
            this.sit.qualified = this.sit.boyHege + this.sit.girlHege + '(' + '男' + this.sit.boyHege + '女' + this.sit.girlHege + ')'
            this.sit.noqualified = this.sit.boyBuhege + this.sit.girlBuhege + '(' + '男' + this.sit.boyBuhege + '女' + this.sit.girlBuhege + ')'
            this.sit.outstanding = this.sit.Qualified
            this.sit.pass = this.sit.Good
          }
          //跳绳
          this.rope = res.data.rope
          if(this.rope.length != 0) {
            this.rope.all = this.rope.all + '(' + '男' + this.rope.boyAll + '女' + this.rope.girlAll + ')'
            this.rope.fine = this.rope.boyYou + this.rope.girlYou + '(' + '男' + this.rope.boyYou + '女' + this.rope.girlYou + ')'
            this.rope.good = this.rope.boyLiang + this.rope.girlLiang + '(' + '男' + this.rope.boyLiang + '女' + this.rope.girlLiang + ')'
            this.rope.qualified = this.rope.boyHege + this.rope.girlHege + '(' + '男' + this.rope.boyHege + '女' + this.rope.girlHege + ')'
            this.rope.noqualified = this.rope.boyBuhege + this.rope.girlBuhege + '(' + '男' + this.rope.boyBuhege + '女' + this.rope.girlBuhege + ')'
            this.rope.outstanding = this.rope.Qualified
            this.rope.pass = this.rope.Good
          }
          //50米跑
          this.five_m  = res.data.five_m
          if(this.five_m.length != 0) {
            this.five_m.all = this.five_m.all + '(' + '男' + this.five_m.boyAll + '女' + this.five_m.girlAll + ')'
            this.five_m.fine = this.five_m.boyYou + this.five_m.girlYou + '(' + '男' + this.five_m.boyYou + '女' + this.five_m.girlYou + ')'
            this.five_m.good = this.five_m.boyLiang + this.five_m.girlLiang + '(' + '男' + this.five_m.boyLiang + '女' + this.five_m.girlLiang + ')'
            this.five_m.qualified = this.five_m.boyHege + this.five_m.girlHege + '(' + '男' + this.five_m.boyHege + '女' + this.five_m.girlHege + ')'
            this.five_m.noqualified = this.five_m.boyBuhege + this.five_m.girlBuhege + '(' + '男' + this.five_m.boyBuhege + '女' + this.five_m.girlBuhege + ')'
            this.five_m.outstanding = this.five_m.Qualified
            this.five_m.pass = this.five_m.Good
          }
          //一分钟仰卧起坐
          this.sit_up  = res.data.sit_up
          if(this.sit_up.length != 0) {
            this.sit_up.all = this.sit_up.all + '(' + '男' + this.sit_up.boyAll + '女' + this.sit_up.girlAll + ')'
            this.sit_up.fine = this.sit_up.boyYou + this.sit_up.girlYou + '(' + '男' + this.sit_up.boyYou + '女' + this.sit_up.girlYou + ')'
            this.sit_up.good = this.sit_up.boyLiang + this.sit_up.girlLiang + '(' + '男' + this.sit_up.boyLiang + '女' + this.sit_up.girlLiang + ')'
            this.sit_up.qualified = this.sit_up.boyHege + this.sit_up.girlHege + '(' + '男' + this.sit_up.boyHege + '女' + this.sit_up.girlHege + ')'
            this.sit_up.noqualified = this.sit_up.boyBuhege + this.sit_up.girlBuhege + '(' + '男' + this.sit_up.boyBuhege + '女' + this.sit_up.girlBuhege + ')'
            this.sit_up.outstanding = this.sit_up.Qualified
            this.sit_up.pass = this.sit_up.Good
          }
          //50*8往返跑
          this.fifty_eight = res.data.fiftyEight
          if(this.fifty_eight.length != 0) {
            this.fifty_eight.all = this.fifty_eight.all + '(' + '男' + this.fifty_eight.boyAll + '女' + this.fifty_eight.girlAll + ')'
            this.fifty_eight.fine = this.fifty_eight.boyYou + this.fifty_eight.girlYou + '(' + '男' + this.fifty_eight.boyYou + '女' + this.fifty_eight.girlYou + ')'
            this.fifty_eight.good = this.fifty_eight.boyLiang + this.fifty_eight.girlLiang + '(' + '男' + this.fifty_eight.boyLiang + '女' + this.fifty_eight.girlLiang + ')'
            this.fifty_eight.qualified = this.fifty_eight.boyHege + this.fifty_eight.girlHege + '(' + '男' + this.fifty_eight.boyHege + '女' + this.fifty_eight.girlHege + ')'
            this.fifty_eight.noqualified = this.fifty_eight.boyBuhege + this.fifty_eight.girlBuhege + '(' + '男' + this.fifty_eight.boyBuhege + '女' + this.fifty_eight.girlBuhege + ')'
            this.fifty_eight.outstanding = this.fifty_eight.Qualified
            this.fifty_eight.pass = this.fifty_eight.Good
          }
          //立定跳远
          this.standing = res.data.standing
          if(this.standing.length != 0) {
            this.standing.all = this.standing.all + '(' + '男' + this.standing.boyAll + '女' + this.standing.girlAll + ')'
            this.standing.fine = this.standing.boyYou + this.standing.girlYou + '(' + '男' + this.standing.boyYou + '女' + this.standing.girlYou + ')'
            this.standing.good = this.standing.boyLiang + this.standing.girlLiang + '(' + '男' + this.standing.boyLiang + '女' + this.standing.girlLiang + ')'
            this.standing.qualified = this.standing.boyHege + this.standing.girlHege + '(' + '男' + this.standing.boyHege + '女' + this.standing.girlHege + ')'
            this.standing.noqualified = this.standing.boyBuhege + this.standing.girlBuhege + '(' + '男' + this.standing.boyBuhege + '女' + this.standing.girlBuhege + ')'
            this.standing.outstanding = this.standing.Qualified
            this.standing.pass = this.standing.Good
          }
          //1000米跑
          this.one1 = res.data.one
          if(this.one1.length != 0) {
            this.one1.all = this.one1.boyAll + '(' + '男' + this.one1.boyAll + ')'
            this.one1.fine = this.one1.boyYou + '(' + '男' + this.one1.boyYou + ')'
            this.one1.good = this.one1.boyLiang + '(' + '男' + this.one1.boyLiang + ')'
            this.one1.qualified = this.one1.boyHege + '(' + '男' + this.one1.boyHege + ')'
            this.one1.noqualified = this.one1.boyBuhege + '(' + '男' + this.one1.boyBuhege + ')'
            this.one1.outstanding = this.one1.Qualified
            this.one1.pass = this.one1.Good
          }
          //800米跑
          this.eight = res.data.eight
          if(this.eight.length != 0) {
            this.eight.all = this.eight.girlAll + '(' + '女' + this.eight.girlAll + ')'
            this.eight.fine = this.eight.girlYou + '(' + '女' + this.eight.girlYou + ')'
            this.eight.good = this.eight.girlLiang + '(' + '女' + this.eight.girlLiang + ')'
            this.eight.qualified = this.eight.girlHege + '(' + '女' + this.eight.girlHege + ')'
            this.eight.noqualified = this.eight.girlBuhege + '(' + '女' + this.eight.girlBuhege + ')'
            this.eight.noqualified = this.eight.girlBuhege + '(' + '女' + this.eight.girlBuhege + ')'
            this.eight.outstanding = this.eight.Qualified
            this.eight.pass = this.eight.Good
          }
        })
      },
      //总体
      drawLine () {
        // 基于准备好的dom，初始化echarts实例
        let bar_dv = this.$refs.chart
        let myChart = this.$echarts.init(bar_dv)

        myChart.clear();
        //绘制图表
        if(this.allEcharts.length !=0) {

          myChart.setOption({
            legend: {},
            tooltip: {},
            dataset: {
              source: this.allEcharts
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
              {type: 'bar'},
              {type: 'bar'}
            ]
          })
        }
      },
      //BMI
      drawLine4 () {
        // 基于准备好的dom，初始化echarts实例
        let bar_dv4 = this.$refs.chart4
        let myChart = this.$echarts.init(bar_dv4)
        myChart.clear();
        //绘制图表
        if(this.bmiEcharts != 0){
          myChart.setOption({
            legend: {},
            tooltip: {},
            dataset: {
              source: this.bmiEcharts
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
              {type: 'bar'},
              {type: 'bar'}
            ]
          })
        }

      },
      //肺活量
      drawLine5 () {
        // 基于准备好的dom，初始化echarts实例
        // let myChart = this.$echarts.init(document.getElementById('myChart'))
        let bar_dv5 = this.$refs.chart5
        let myChart = this.$echarts.init(bar_dv5)
        myChart.clear();
        //绘制图表
        if(this.vitalEcharts.length != 0){
          myChart.setOption({
            legend: {},
            tooltip: {},
            dataset: {
              source: this.vitalEcharts
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
              {type: 'bar'},
              {type: 'bar'}
            ]
          })
        }
      },
      //一分钟跳绳
      drawLine6 () {
        // 基于准备好的dom，初始化echarts实例
        let bar_dv6 = this.$refs.chart6
        let myChart = this.$echarts.init(bar_dv6)
        myChart.clear();
        //绘制图表
        if(this.ropeEcharts.length != 0){
          myChart.setOption({
            legend: {},
            tooltip: {},
            dataset: {
              source: this.ropeEcharts
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
              {type: 'bar'},
              {type: 'bar'}
            ]
          })
        }

        },
      //坐位体前屈
      drawLine7 () {
        // 基于准备好的dom，初始化echarts实例
        let bar_dv7 = this.$refs.chart7
        let myChart = this.$echarts.init(bar_dv7)
        myChart.clear();
        //绘制图表
        if(this.sitEcharts.length != 0){
          myChart.setOption({
            legend: {},
            tooltip: {},
            dataset: {
              source: this.sitEcharts
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
              {type: 'bar'},
              {type: 'bar'}
            ]
          })
        }
      },
      //50米跑
      drawLine8 () {
        // 基于准备好的dom，初始化echarts实例
        let bar_dv8 = this.$refs.chart8
        let myChart = this.$echarts.init(bar_dv8)
        myChart.clear();
        //绘制图表
        if(this.fiftyEcharts.length !=0){
          myChart.setOption({
            legend: {},
            tooltip: {},
            dataset: {
              source: this.fiftyEcharts
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
              {type: 'bar'},
              {type: 'bar'}
            ]
          })
        }

      },
      //一分钟仰卧起坐
      drawLine9 () {
        // 基于准备好的dom，初始化echarts实例
        let bar_dv9 = this.$refs.chart9
        let myChart = this.$echarts.init(bar_dv9)
        myChart.clear();
        //绘制图表
        if(this.sitUpEcharts.length != 0){
          myChart.setOption({
            legend: {},
            tooltip: {},
            dataset: {
              source: this.sitUpEcharts
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
              {type: 'bar'},
              {type: 'bar'}
            ]
          })
        }
      },
      //50*8往返跑
      drawLine10 () {
        // 基于准备好的dom，初始化echarts实例
        let bar_dv10 = this.$refs.chart10
        let myChart = this.$echarts.init(bar_dv10)
        myChart.clear();
        //绘制图表
        if(this.fiftyEightEcharts.length != 0){
          myChart.setOption({
            legend: {},
            tooltip: {},
            dataset: {
              source: this.fiftyEightEcharts
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
              {type: 'bar'},
              {type: 'bar'}
            ]
          })
        }

      },
      //立定跳远
      drawLine11 () {
        // 基于准备好的dom，初始化echarts实例
        let bar_dv11 = this.$refs.chart11
        let myChart = this.$echarts.init(bar_dv11)
        myChart.clear();
        //绘制图表
        if(this.standingEcharts.length != 0){
          myChart.setOption({
            legend: {},
            tooltip: {},
            dataset: {
              source: this.standingEcharts
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
              {type: 'bar'},
              {type: 'bar'}
            ]
          })
        }

      },
      //1000米跑
      drawLine12 () {
        // 基于准备好的dom，初始化echarts实例
        let bar_dv12 = this.$refs.chart12
        let myChart = this.$echarts.init(bar_dv12)
        myChart.clear();
        //绘制图表
        if(this.oneEcharts.length != 0){
          myChart.setOption({
            legend: {},
            tooltip: {},
            dataset: {
              source: this.oneEcharts
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
              {type: 'bar'},
              {type: 'bar'}
            ]
          })
        }

      },
      //800米跑
      drawLine13 () {
        // 基于准备好的dom，初始化echarts实例
        let bar_dv13 = this.$refs.chart13
        let myChart = this.$echarts.init(bar_dv13)
        myChart.clear();
        //绘制图表
        if(this.eightEcharts.length != 0){
          myChart.setOption({
            legend: {},
            tooltip: {},
            dataset: {
              source: this.eightEcharts
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
              {type: 'bar'},
              {type: 'bar'}
            ]
          })
        }
      },
    },
    mounted () {
      // this.$nextTick(function () {
        // this.drawLine()
        // this.drawLine2()
        // this.drawLine3()
        // this.drawLine4()
        // this.drawLine5()
        // this.drawLine6()
        // this.drawLine7()
        // this.drawLine8()
        // this.drawLine9()
        // this.drawLine10()
        // this.drawLine11()
        // this.drawLine12()
        // this.drawLine13()
      // })
    },
    created () {
      this.getYear()
    },
    destroyed () {
      window.removeEventListener('bar_dv', this.drawLine, 20)
      window.removeEventListener('bar_dv4', this.drawLine4, 20)
      window.removeEventListener('bar_dv5', this.drawLine5, 20)
      window.removeEventListener('bar_dv6', this.drawLine6, 20)
      window.removeEventListener('bar_dv7', this.drawLine7, 20)
      window.removeEventListener('bar_dv8', this.drawLine8, 20)
      window.removeEventListener('bar_dv9', this.drawLine9, 20)
      window.removeEventListener('bar_dv10', this.drawLine10, 20)
      window.removeEventListener('bar_dv11', this.drawLine11, 20)
      window.removeEventListener('bar_dv12', this.drawLine12, 20)
      window.removeEventListener('bar_dv13', this.drawLine13, 20)
    },
  }
</script>
<style lang="less" scoped>
  .middle {
    height: 98%;
    width: 96%;
    background: repeat center top;
    background-size: contain;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    .middlebg {
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      background: url(../../assets/image/bg-img.png) no-repeat center;
      background-size: 100%;

    }
    /deep/ .el-tabs.el-tabs--card.el-tabs--top {
      background: #fff;
    }

    /deep/ .el-tabs__content {
      padding: 0 20px;
    }
    .title1 {
      display: inline-block;
      padding: 0 10px;
      margin-bottom: 20px;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      &:hover {
        background: #00b02d;
        color: #fff;
      }
    }
    .planTitle {
      color: #fff;
      background: #00B02D;
    }
    .one, .two, .three {
      margin: 5px 0;
      margin-bottom: 15px;
      .circle {
        display: inline-block;
        width: 10px;
        height: 10px;
        background: #606266;
        border-radius: 50%;
        margin: 0 10px;
      }
      .adaptive {
        display: inline-block;
      }
      .greens {
        display: inline-block;
        background-color: #00B02D;
        margin: 0 10px;
        /*width: 70px;*/
        text-align: center;
        padding: 3px;
        border-radius: 5px;
        color: #fff;
        font-size: 16px;
      }
      .green {
        display: inline-block;
        margin: 0 10px;
        width: 70px;
        background: #f0f9eb;
        text-align: center;
        padding: 2px 7px;
        border-radius: 5px;
        color: #67c23a;
        border: 1px solid #c2e7b0;
        cursor: pointer;
        font-size: 14px;
      }
      .Greens {
        margin: 0 10px;
        margin-top: 5px;
        padding: 2px 7px;
        display: inline-block;
        background: #f0f9eb;
        border-radius: 5px;
        color: #67c23a;
        border: 1px solid #c2e7b0;
        cursor: pointer;
        font-size: 14px;
      }
      .searchchange, .searchchange2, .searchchange3{
        background: #67c23a;
        color: #fff;
      }
    }

    .tab-tilte {
      float: right;
      display: inline-block;
      li {
        display: inline-block;
        cursor: pointer;
      }
      li:nth-child(1) {
        padding-right: 10px;
      }
      .active {
        color: #003366;
        font-weight: 600;
      }
    }

    .tab-content {
      padding: 30px 0;
      .chart {
        .dendrogram {
          background: #eee;
          margin:20px 0 30px 0;
          .evaluate {
            text-align: center;
            padding-top: 20px;
            .block {
              display: inline-block;
              width: 16px;
              height: 16px;
              vertical-align: middle;
              margin-right: 10px;
            }
            span:nth-child(1) {
              background: #00b02d;
            }
            span:nth-child(3) {
              background: #9cbf83;
            }
            span:nth-child(5) {
              background: #f0c92c;
            }
            span:nth-child(7) {
              background: #ff9900;
            }
            span:nth-child(2n) {
              font-size: 14px;
              margin-right: 10px;
            }
          }
          h5 {
            text-align: center;
            font-size: 18px;
            font-weight: normal;
          }
          .total {
            height: 40px;
            width: 60px;
            text-align: center;
            display: inline-block;
            h6 {
              font-size: 14px;
            }
            span {
              font-size: 14px;
            }
          }
          .rectangle {
            width: 1000px;
            margin-left: 30px;
            height: 40px;
            margin-top: 30px;
            display: inline-block;
            position: relative;
            .bgc {
              width: 1000px;
              height: 100%;
              font-size: 0;
              .one {
                display: inline-block;
                margin: 0;
                height: 100%;
                background: #00b02d;
              }
              .two {
                display: inline-block;
                margin: 0;
                height: 100%;
                background: #9cbf83;
              }
              .three {
                display: inline-block;
                margin: 0;
                height: 100%;
                background: #f0c92c;
              }
              .four {
                display: inline-block;
                margin: 0;
                height: 100%;
                background: #ff9900;
              }

            }
            .bgc2 {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 10px;
              font-size:0;
              .one2, .two2, .three2, .four2 {
                font-size: 14px;
                /*border: 1px solid #ccc;*/
                height: 100%;
                text-align: center;
                display:inline-block;
              }
            }

          }
          .pic {
            padding-top: 20px;
            text-align: center;

          }

        }
      }
      .list {
        .title {
          h5 {
            display: inline-block;
            font-size: 16px;
          }
          span {
            padding: 0 10px;
          }
        }
        .surface {
          width: 100%;
          table {
            width: 100%;
            padding-top: 20px;
            tr {
              width: 100%;
              td {
                list-style: none;
                width: 12%;
                display: inline-block;
                text-align: center;
                height: 50px;
                line-height: 50px;
                border-bottom: 1px solid #eee;
              }
            }
          }


        }
      }
    }
  }
</style>
